<template>
  <!-- 动态内容 -->
  <div class="messageListBox">
    <div
      class="detail-content"
      v-for="(message, index) in contentList"
      :key="message.mid"
    >
      <div class="detail">
        <div class="header">
          <div
            class="header-left"
            @click="getOtherUser(message.nickname, message.uid)"
          >
            <div class="avatar">
              <el-avatar size="medium" :src="message.avatar"></el-avatar>
            </div>
            <div class="username_time">
              <div class="username">{{ message.nickname }}</div>
              <div class="time">
                <i class="el-icon-pie-chart"></i>{{ message.date }}
              </div>
            </div>
          </div>
          <div class="header-right">
            <el-button
              type="danger"
              size="mini"
              @click="deleteMsg(message, index)"
              v-if="userInfo.uid == message.uid || userInfo.permission >= 8"
              >删帖</el-button
            >
          </div>
        </div>
        <div class="message-content" @click="toMessageDetail(message)">
          <h4>{{ message.title }}</h4>
          <p>{{ message.content }}</p>
          <div class="message-imgs" v-if="message.images.length != 0">
            <div class="imgsbox" v-if="message.images.length == 1">
              <img
                :src="message.images[0]"
                style="
                  max-width: 353px;
                  max-height: 200px;
                  object-fit: cover;
                  border-radius: 5px;
                "
              />
            </div>
            <template v-if="message.images.length == 2">
              <div class="imgsbox">
                <el-image
                  v-for="(imgs, index) in message.images"
                  :key="index"
                  :src="imgs"
                  style="width: 45%; margin-right: 10px; display: inline-block"
                ></el-image>
              </div>
            </template>
            <template v-if="message.images.length > 2">
              <div class="imgsbox">
                <el-image
                  v-for="(imgs, index) in message.images"
                  :key="index"
                  :src="imgs"
                  style="width: 30%; margin-right: 10px; display: inline-block"
                ></el-image>
              </div>
            </template>
          </div>
        </div>
        <div class="footer">
          <div class="watched">
            <i class="el-icon-view" size="mini"></i>
            <span>浏览：{{ message.views }}</span>
          </div>
          <div class="comments" @click="toMessageDetail(message)">
            <i class="el-icon-chat-line-square" size="mini"></i>
            <span
              >评论<i style="font-style: normal" v-if="message.comments != 0"
                >:{{ message.comments }}</i
              ></span
            >
          </div>
          <div class="support" @click="kudos(message.mid, index)">
            <i
              v-if="message.mark == 1"
              class="el-icon-thumb"
              style="color: #007acc; font-weight: 700; font-size: 15px"
              size="medium"
            ></i>
            <i v-else class="el-icon-thumb" size="medium"></i>
            <span
              >点赞
              <template v-if="!message.likes == 0">
                ：{{ message.likes }}
              </template></span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "message-list",
  props: {
    contentList: { type: Array },
    myInfo: {
      type: Function,
    },
  },
  data() {
    return {
      // contentList:[],
    };
  },
};
</script>

<style lang="less" scoped>
.detail-content {
  margin-top: 10px;
  .detail {
    border: 1px solid #0078d4;
    margin-bottom: 5px;
    // .message-imgs {
    //   display: flex;
    //   justify-content: space-around;
    //   flex-wrap: wrap;
    //   .el-image {
    //     flex: 1;
    //   }
    // }
    .footer {
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 12px;
      font-weight: 400;
      div {
        margin: 3px 0;
        i {
          margin-right: 2px;
        }
      }
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      margin-top: 5px;
      .header-left {
        .avatar {
          margin: 3px;
        }
        display: flex;
        align-items: center;
        .username_time {
          .time {
            font-size: 12px;
          }
        }
      }
      .header-right {
        margin-top: -3px;
        margin-right: 5px;
      }
    }
    .message-content {
      .message-imgs {
        padding: 3px;
      }
      h4 {
        margin: 5px;
        padding: 0;
      }
      p {
        margin: 5px;
        font-size: 14px;
      }
      .el-image {
        margin: 5px;
      }
    }
  }
}
</style>